<template>
  <q-slide-transition class="full-width">
    <div v-show="isTopSpace">
      <slot name="top"></slot>
    </div>
  </q-slide-transition>
  <div class="full-width row justify-between">
    <div class="q-gutter-sm row items-center">
      <slot name="menuLeft"></slot>
    </div>
    <q-space />
    <div class="q-gutter-sm row items-center">
      <slot :btnAttr="btnAttr" name="menuRight"></slot>
      <q-btn v-if="refreshBtn" class="q-btn-refresh" icon="cached" v-bind="btnAttr" @click="refreshClick">
        <q-tooltip class="text-no-wrap" v-bind="$tooltipAttr">{{ $t('Refresh') }}</q-tooltip>
      </q-btn>
      <q-btn v-if="fullscreenBtn" :icon="fullIcon(props)" v-bind="btnAttr" @click="toggleFullscreen(props)">
        <q-tooltip class="text-no-wrap" v-bind="$tooltipAttr">
          {{ props.inFullscreen ? $t('ExitFullScreen') : $t('FullScreen') }}
        </q-tooltip>
      </q-btn>
      <q-btn v-if="searchBtn" icon="search" v-bind="btnAttr" @click="toggleSearch">
        <q-tooltip class="text-no-wrap" v-bind="$tooltipAttr">
          {{ $t('SearchVisibility') }}
        </q-tooltip>
      </q-btn>
      <q-btn v-if="dynamicBtn && multiColumn.length === 1" icon="tune" v-bind="btnAttr" @click="handleCheck">
        <q-tooltip class="text-no-wrap" v-bind="$tooltipAttr">{{ $t('ColumnVisibility') }}</q-tooltip>
        <q-popup-proxy :offset="[10, 10]" anchor="bottom left" breakpoint="0" class="q-pa-md dynamic-column-popup"
                       self="top left" transition-hide="jump-up" transition-show="jump-down">
          <q-scroll-area :visible="false" class="fit">
            <q-option-group v-model="showColumns" :options="options" type="checkbox" />
          </q-scroll-area>
        </q-popup-proxy>
      </q-btn>
      <slot :btnAttr="btnAttr" name="menuRightR"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed, inject, ref, watchSyncEffect } from 'vue'

const prop = defineProps({
  props: Object, rightBtn: Boolean, searchBtn: Boolean, dynamicBtn: Boolean, refreshBtn: Boolean, isFullscreen: Boolean,
  dynamicColumns: Array, fullscreenBtn: Boolean, columns: { type: Array, default: () => [] },
  multiColumn: { type: Array, default: () => [] }
})

const isDense = inject('isDense')
const emits = defineEmits(['refresh', 'update:isFullscreen', 'update:dynamicColumns'])

const isTopSpace = ref(true)
const showColumns = ref(prop.dynamicColumns || [])
const fullIcon = computed(() => props => props.inFullscreen ? 'fullscreen_exit' : 'zoom_out_map')
const options = computed(
  () => prop.columns.filter(el => !el.required).map(({ label, name: value }) => ({ label, value })))
const btnAttr = computed(
  () => ({ round: true, outline: true, dense: isDense.value ?? true, size: '.825rem', color: 'primary' }))

const refreshClick = () => emits('refresh')
const toggleSearch = () => (isTopSpace.value = !isTopSpace.value)
watchSyncEffect(() => emits('update:dynamicColumns', showColumns.value))
const handleCheck = () => (prop.dynamicColumns && (showColumns.value = [...prop.dynamicColumns]))
const toggleFullscreen = props => {
  emits('update:isFullscreen', !prop.isFullscreen)
  props.toggleFullscreen()
}
</script>